<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="formInline" class="user-search">
      <el-form-item label="搜索：">
        <el-select
          size="small"
          v-model="formInline.isLock"
          placeholder="请选择"
        >
          <el-option label="全部" value=""></el-option>
          <el-option label="正常" value="N"></el-option>
          <el-option label="已锁定" value="Y"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="">
        <el-input
          size="small"
          v-model="formInline.userName"
          placeholder="输入用户名"
        ></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-input
          size="small"
          v-model="formInline.userMobile"
          placeholder="输入手机号"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-search"
          @click="search"
          >搜索</el-button
        >
        <el-button
          size="small"
          type="primary"
          icon="el-icon-plus"
          @click="handleEdit()"
          >添加</el-button
        >
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table
      size="small"
      @selection-change="selectChange"
      :data="hostData"
      highlight-current-row
      v-loading="loading"
      border
      element-loading-text="拼命加载中"
      style="width: 100%"
    >
      <el-table-column align="center" type="selection" width="50">
      </el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="username"
        label="用户名"
        width="120"
      >
        <template #default="scope">
          <div>{{ scope.row.user.name }}</div>
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        sortable
        prop="username"
        label="用户名"
        width="120"
      >
        <template #default="scope">
          <div>{{ scope.row.host.address }}</div>
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        sortable
        prop="title"
        label="姓名"
        width="120"
      >
        <template #default="scope">
          <div>{{ scope.row.user.name }}</div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="sex"
        label="性别"
        min-width="70"
      >
        <template #default="scope">
          <div>{{ scope.row.user.sex }}</div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="tel"
        label="手机号码"
        min-width="100"
      >
        <template #default="scope">
          <div>{{ scope.row.account.mobile }}</div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="date_time"
        label="创建时间"
        min-width="150"
      >
        <template #default="scope">
          <div>{{ scope.row.user.date_time }}</div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="state"
        label="状态"
        min-width="70"
      >
        <template #default="scope">
          <el-switch
            v-model="scope.row.state"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="editType(scope.$index, scope.row)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="500">
        <template #default="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="deleteUser(scope.$index, scope.row)"
            >删除</el-button
          >
          <el-button
            size="mini"
            type="success"
            @click="resetpwd(scope.$index, scope.row)"
            >重置密码</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination
      v-bind:child-msg="pageparm"
      @callFather="callFather"
    ></Pagination>
    <!-- 编辑界面 -->
    <el-dialog
      :title="title"
      v-model="editFormVisible"
      width="30%"
      @click="closeDialog('edit')"
    >
      <el-form
        label-width="80px"
        ref="editForm"
        :model="editForm"
        :rules="rules"
      >
        <el-form-item label="用户名" prop="username">
          <el-input
            size="small"
            v-model="editForm.username"
            auto-complete="off"
            placeholder="请输入用户名"
            :disabled="isChange"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            size="small"
            v-model="editForm.password"
            auto-complete="off"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="title">
          <el-input
            size="small"
            v-model="editForm.title"
            auto-complete="off"
            placeholder="请输入姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="tel">
          <el-input
            size="small"
            v-model="editForm.tel"
            auto-complete="off"
            placeholder="手机号码"
          ></el-input>
        </el-form-item>
        <el-form-item label="角色" prop="identity">
          <el-select
            size="small"
            v-model="editForm.identity"
            :placeholder="editForm.identity"
            class="userRole"
          >
            <el-option
              v-for="item in identityList"
              :key="item.identity"
              :label="item.title"
              :value="item.title"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio v-model="editForm.sex" label="男">男</el-radio>
          <el-radio v-model="editForm.sex" label="女">女</el-radio>
        </el-form-item>
      </el-form>
      <div class="dialog-footer">
        <el-button size="small" @click="closeDialog('edit')">取消</el-button>
        <el-button
          size="small"
          type="primary"
          :loading="loading"
          class="title"
          @click="submitForm('editForm')"
          >保存</el-button
        >
      </div>
    </el-dialog>
    <!-- 数据权限 -->
  </div>
</template>

<script>
import { getHost } from "@/network/host";
import Pagination from "@/components/Pagination";

export default {
  name: "HostManage",
  data() {
    return {
      isChange: true,
      identityList: [],
      password: 0,
      username: 0,
      identity: 99999,
      loading: false, //是显示加载
      title: "添加用户",
      editFormVisible: false, //控制编辑页面显示与隐藏
      // 编辑与添加
      editForm: {},
      // rules表单验证
      rules: {
        title: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        identity: [{ required: true, message: "请选择角色", trigger: "blur" }],
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            pattern: /^1(3\d|47|5((?!4)\d)|7(0|1|[6-8])|8\d)\d{8,8}$/,
            required: true,
            message: "请输入正确的手机号",
            trigger: "blur",
          },
        ],
        tel: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            pattern: /^1(3\d|47|5((?!4)\d)|7(0|1|[6-8])|8\d)\d{8,8}$/,
            required: true,
            message: "请输入正确的手机号",
            trigger: "blur",
          },
        ],
        sex: [{ required: true, message: "请选择性别", trigger: "blur" }],
        password: [
          { required: true, message: "请选择性别", trigger: "blur" },
          {
            min: 6,
            max: 18,
            message: "密码厂区要求6-18个字符之间",
            trigger: "blur",
          },
        ],
      },
      // 请求数据参数
      formInline: {
        page: 1,
        limit: 10,
        deptId: "",
        userName: "",
        userMobile: "",
        isLock: "",
      },
      //用户数据
      hostData: [],
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10,
      },
    };
  },
  created() {
    getHost().then(
      (res) => {
        this.hostData = res.data;
      },
      (err) => {
        this.$message.error("请求失败");
      }
    );
  },
};
</script>

<style scoped>
</style>